<!-- 重新认证（非中华人民共和国大陆地区） -->
<template>
  <div>
    <ContainerTitle text="企业基本信息-重新认证"></ContainerTitle>
    <!-- <div class="titleDiv">
      <div>企业基本信息-重新认证</div>
    </div> -->
    <div class="msgDiv">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="单位名称（中英文对照）：" class="UnitName" prop="companyName">
          <el-input v-model="ruleForm.companyName" placeholder="请输入中文名称（英文名称）" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="经办人姓名：" class="UnitName" prop="handlerName">
          <el-input v-model="ruleForm.handlerName" placeholder="请输入经办人姓名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="经办人证件类型：" class="UnitName" prop="handlerCertificatesType">
          <el-select v-model="ruleForm.handlerCertificatesType" placeholder="请选择证件类型">
            <el-option
              v-for="item in DocumentType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办人证件号码：" class="UnitName" prop="handlerCertificatesNumber">
          <el-input v-model="ruleForm.handlerCertificatesNumber" placeholder="请输入经办人证件号码" maxlength="30" @input="ruleForm.handlerCertificatesNumber = ruleForm.handlerCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="经办人性别：" class="UnitName" prop="handlerSex">
          <el-radio-group v-model="ruleForm.handlerSex" style="margin-left: 0px;">
            <el-radio
              v-for="item in sys_user_sex"
              :key="item.dictLabel"
              :label="item.dictValue"
            >{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="经办人联系电话：" class="UnitName" prop="handlerPhone">
          <el-input v-model="ruleForm.handlerPhone" placeholder="请输入经办人联系电话" maxlength="11" @input="ruleForm.handlerPhone = ruleForm.handlerPhone.replace(/[^0-9]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="经办人电子邮箱：" class="UnitName" prop="handlerMailbox">
          <el-input v-model="ruleForm.handlerMailbox" placeholder="请输入经办人电子邮箱" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="上传单位开业证书信息页：" class="UnitName" prop="companyCertificateFile">
          <div style="width: 490px;display: flex;">
            <finalUpload
              @changeImgUp="upLoadImgCompany"
              :fileLists="CCF"
              :limit="1"
              ref="imgLists"
              tip="  "
            ></finalUpload>
            <div class="needing">
              <div>注意事项：</div>
              <div>上传单位开业证书或单位营业执照信息页的扫描件或照片。</div>
              <div>照片所有信息需清晰可见，内容真实有效，不得做 任何修改。照片支持.jpg、.jpeg 格式，大小不超过1M。</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="上传经办人证件信息页：" class="UnitName" prop="handlerCertificateFile">
          <div style="width: 490px;display: flex;">
            <finalUpload
              @changeImgUp="upLoadImgHandler"
              :fileLists="HCFF"
              :limit="1"
              ref="imgLists"
              tip="  "
              :size="0.5"
            ></finalUpload>
            <div class="needing">
              <div>注意事项：</div>
              <div>上传证件个人信息页(面)扫描件或照片。</div>
              <div>照片所有信息需清晰可见，内容真实有效，不得做 任何修改。照片支持.jpg、.jpeg 格式，大小不超过500K。</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item style="display: flex;">
          <Buttons :buttons="buttons" @resetForm="resetForm('ruleForm')" @submitForm="submitForm('ruleForm')"></Buttons>
          <!-- <el-button class="cancel" @click="submitForm('ruleForm')">取消</el-button>
          <el-button class="Submit" @click="resetForm('ruleForm')">提交</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Breadcrumb from '@/components/breadcrumb'
import finalUpload from '@/components/finalUpload'

import { mapActions } from 'vuex'

import recerNotAcountry from '@/formRules/userAccount/recerNotAcountry.js'
import { getFileList } from '@/common/api.js'
import { getClueInfo, againAuthentication } from '@/common/api/company.js'

export default {
  components: { Breadcrumb, finalUpload },
  mixins: [recerNotAcountry],
  data() {
    return {
      buttons: [
        { text: "取消", type: "normal", size: "l", method: "submitForm" },
        { text: "提交", type: "success", size: "l", method: "resetForm" }
      ],
      imgList: [],
      imgsList: [],
      DocumentType: [], //证件类型
      sys_user_sex: [], //性别
      companyInfo: '', //
      login: '', //
      HCFF: [],
      CCF: []
    }
  },
  methods: {
    ...mapActions(['reGetCompanyInfo']),
    async Picture_dynamics(dynamics, arr) {
      let res = await getFileList({
        batchId: dynamics
      })
      // let api = `${host}/system/file/list?batchId=${dynamics}`
      // let res = await request(this, api, {}, 'GET')
      res.rows.forEach((item) => {
        let fileList = {
          name: item.fileName,
          filePath: item.filePath
        }
        arr.push(fileList)
      })
    },
    //上传单位开业证书信息页
    upLoadImgCompany(val) {
      this.ruleForm.companyCertificateFile = val.map(el => el.batchId).join(',')
    },
    //上传经办人证件信息页
    upLoadImgHandler(val) {
      this.ruleForm.handlerCertificateFile = val.map(el => el.batchId).join(',')
    },
    //取消
    submitForm(ruleForm) {
      this.$router.replace({ path: '/company/enterprise' })
      this.$refs[ruleForm].resetFields()
    },
    //提交
    resetForm(ruleForm) {
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          let data = {
            clueType: this.companyInfo.clueType,
            clueSource: this.companyInfo.clueSource,
            attractInvestmentClueExpand: this.ruleForm,
          }
          // let api = `${host}/company/againAuthentication`
          // let res = await request(this, api, data, 'POST')
          let res = await againAuthentication(data)
          if (res.code == 200) {
            this.reGetCompanyInfo()
            this.$router.replace({ path: '/company/enterprise' })
          }else{
            this.$message.error(res.msg)
          }
        }
      })
    },
    async _Reverse() {
      let data = {
        clueId: this.login.clueId,
      }
      // let api = `${host}/company/profile/getClueInfo`
      // let res = await request(this, api, data, 'get')
      let res = await getClueInfo(data)
      this.ruleForm = res.data
      // 单位开业证书文件
      if (res.data.companyCertificateFile != '') {
        this.Picture_dynamics(res.data.companyCertificateFile, this.CCF)
      }
      // 经办人证件文件
      if (res.data.handlerCertificateFile != '') {
        this.Picture_dynamics(res.data.handlerCertificateFile, this.HCFF)
      }
    },
    async getFormOptions() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`sys_user_sex,legal_representative_type`).then(res => {
        this.DocumentType = res.legal_representative_type
        this.sys_user_sex = res.sys_user_sex
      })
    }
  },
  created() {
    this.login = JSON.parse(localStorage.getItem('login'))
    this.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    this.getFormOptions()
    this._Reverse()
  },
}
</script>
<style lang="scss" scoped>
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.msgDiv {
  margin: 40px 0;
}
::v-deep .el-input__inner {
  width: 550px;
  display: flex;
}
.UnitName {
  display: flex;
  ::v-deep .el-form-item__label {
    width: 190px !important;
    position: absolute;
  }
  ::v-deep .el-form-item__content {
    margin-left: 180px !important;
  }
}
.cancel {
  width: 120px;
  height: 40px;
  background: #f1f2f4;
  border-radius: 3px;
  color: #045db9;
}
.Submit {
  width: 120px;
  height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
}
.needing {
  text-align: initial;
  line-height: 25px;
  color: #bbbbbb;
  // font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
::v-deep .el-message-box {
  width: 340px !important;
  height: 157px !important;
}
::v-deep .el-message-box__btns {
  margin-top: 40px !important;
}
</style>